<template>
  <div>
    <el-button
      type="primary"
      :icon="Plus"
      @click="clickAddSpu"
      :disabled="!category3Id">
      添加SPU
    </el-button>
    <el-table border :data="SpupageList" style="margin-top: 20px">
      <el-table-column
        type="index"
        width="80"
        label="序号"
        align="center"></el-table-column>
      <el-table-column label="SPU名称" prop="spuName"></el-table-column>
      <el-table-column label="SPU描述" prop="description"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button
            size="small"
            type="primary"
            :icon="Plus"
            @click="clickAddSku(row)"></el-button>
          <el-button
            size="small"
            type="primary"
            @click="EditSpu(row)"
            :icon="Edit"></el-button>

          <el-button
            size="small"
            type="info"
            @click="isSkuInfoList(row)"
            :icon="Warning"></el-button>

          <el-button size="small" type="danger" :icon="Delete"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      v-model="isShowInfo"
      append-to-body
      :title="`${spu?.spuName}   => SKU列`">
      <el-table :data="InfoList">
        <el-table-column property="skuName" label="名称" width="150" />
        <el-table-column property="price" label="价格" width="200" />
        <el-table-column label="重量" property="weight" />
        <el-table-column label="图片" width="200">
          <template v-slot="{ row }">
            <el-image :src="row.skuDefaultImg" alt="" width="100px" />
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-pagination
      style="margin-top: 20px"
      v-model:current-page="page"
      v-model:page-size="limit"
      :total="total"
      :page-sizes="[3, 6, 9]"
      layout="prev, pager, next, jumper, ->, sizes, total"
      @current-change="getSpuPageList"
      @size-change="getSpuPageList" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { getSkuInfoApi, getSkuListBySpuIdApi } from "@/api/product/sku";
import type { SkuListModel, SkuModel } from "@/api/product/model/skuModel";

export default defineComponent({
  name: "SpuList",
});
</script>

<script setup lang="ts">
import { getSpuListApi, FindBySpuApi } from "@/api/product/Spu";
import { storeToRefs } from "pinia";
import { Plus, Edit, Warning, Delete } from "@element-plus/icons-vue";
import { ref, watch } from "vue";

import categoryStore from "@/stores/category";
import type {
  spuListModel,
  findBySpuModel,
  spuModel,
} from "@/api/product/model/spuModel";

import { ShowStatus } from "../types";

// 声明定义自定义事件, 返回的是分发事件的函数
const emit = defineEmits<{
  (e: "setShowStatus", value: ShowStatus): void;
  (e: "setSpu", value: spuModel): void;
}>();

const EditSpu = (row: spuModel) => {
  emit("setShowStatus", ShowStatus.SPU_FORM);
  emit("setSpu", {
    ...row,
    spuImageList: [],
    spuSaleAttrList: [],
  });
};

const CategoryStore = categoryStore();
const { category3Id } = storeToRefs(CategoryStore);

const SpupageList = ref<spuListModel>([]);
const page = ref(1);
const limit = ref(3);
const total = ref(0);

// 点击添加spu
const clickAddSpu = () => {
  // 显示Spu修改的Form
  emit("setShowStatus", ShowStatus.SPU_FORM);
  // 传递新创建的spu,
  emit("setSpu", {
    category3Id: category3Id.value, // 一定要带上
    description: "",
    spuName: "",
    tmId: undefined,
    spuImageList: [],
    spuSaleAttrList: [],
  });
};

// 点击添加sku
const clickAddSku = (row: spuModel) => {
  emit("setSpu", row);
  emit("setShowStatus", ShowStatus.SKU_FORM);
};

// 获取spu列表
const getSpuPageList = async () => {
  const result = await getSpuListApi(
    page.value,
    limit.value,
    category3Id.value as number
  );
  SpupageList.value = result.records;
  total.value = result.total;
};

// 监听3id 获取分页列表
watch(
  category3Id,
  (val) => {
    if (val) {
      getSpuPageList();
    } else {
      SpupageList.value = [];
      total.value = 0;
    }
  },
  {
    immediate: true,
  }
);

const isShowInfo = ref(false);

const InfoList = ref<SkuListModel>();

const spu = ref<spuModel>();
// 查看数据详情
const isSkuInfoList = async (row: spuModel) => {
  spu.value = row;
  const result = await getSkuListBySpuIdApi(row.id as number);
  InfoList.value = result;
  isShowInfo.value = true;
};
</script>

<style scoped lang="scss"></style>
